@import "_mixins";

.hidden {
    display: none ;
}

#header {
    z-index: 19;
    position: absolute;
    top:0;
    left:0;
    right:0;
    width:100%;
    background: url('../img/title_bkg.png');

    @include box-shadow;
    text-align: center;
    a {
        color: white;
    }


    .content {
        position: relative;
        text-align: left;
        width: 1024px;
        margin:0 auto;
    }

    #title {
        border-bottom: 1px solid #000;
        color: white;
        height:84px;

        h1 {
            display:inline-block;
            height:13px;
            margin:0;
            padding:8px 0 8px  78px;
            font:normal 13px $text_font;
            background:url('../img/logo.png') no-repeat 0 4px;
            color:#999999;
        }

        #intro {
            padding-top: 27px;
        }
    }
    #tools {
        border-top:1px solid #333333;
        border-bottom:1px solid #202021;
        background: rgba(0,0,0,0.5);
        height: 58px;
        color: white;

        #range_select {
          padding-top: 20px;

          p {
            display:inline-block;
            vertical-align:top;
            padding:1px 0 0;
            font:normal 13px $text_font;
            color:#4D575F;
            text-shadow:0 1px black;

            strong {
              font-weight:bold;
              color:white;
            }
          }

          a#select_range {
            display:inline-block;
            vertical-align:top;
            width:19px;
            height:19px;
            text-indent:-9999px;
            background:url('../img/icons/report.png') no-repeat 0 0;
            &:hover {
              background-position:0 -19px;
            }
          }

        }


        #work_toolbar {
            padding-top: 13px;
            ul, li {
                display: inline;
            }
            #selection {
                display:inline-block;
                width:120px;
                height:29px;
                padding:0;
                @include border-radius(3px);
                box-shadow: 0 1px #2A2C2E;
                border: 1px solid #000000;

                li {
                  float:left;
                  width:30px;

                  a {
                    display:block;

                    &#auto {
                      @include tools_button(url(../img/icons/tool_icons.png) no-repeat 3px 4px,true,false);
                    }

                    &#draw {
                      @include tools_button(url(../img/icons/tool_icons.png) no-repeat -27px 6px,false,false);
                    }

                    &#remove {
                      @include tools_button(url(../img/icons/tool_icons.png) no-repeat -57px 6px,false,false);
                    }

                    &#edit {
                      @include tools_button(url(../img/icons/tool_icons.png) no-repeat -87px 6px,false,true);
                    }
                  }
                }
            }


            #polytype {      // Def and deg buttons -> ul
                display:inline-block;
                width:128px;
                height:29px;
                padding:0;
                margin:0 0 0 10px;
                @include border-radius(3px);
                box-shadow: 0 1px #2A2C2E;
                border: 1px solid #000000;

                li {
                  float:left;
                  width:64px;

                  a {
                    display:block;
                    font:bold 11px "Helvetica Neue","Helvetica",Arial;
                    color:white;
                    text-transform:uppercase;
                    text-shadow:0 1px #000000;
                    text-decoration:none;

                    &#def {
                      width:29px;
                      height:11px;
                      padding:9px 9px 9px 24px;
                      -webkit-border-top-left-radius: 3px;
                      -webkit-border-bottom-left-radius: 3px;
                      border-right:1px solid #3f3d43;
                      background:url('../img/icons/color_circles.png') no-repeat 10px 12px,-webkit-gradient(linear,50% 0%,50% 100%,from(#36383C),to(#232427));

                      &:hover {
                        background:url('../img/icons/color_circles.png') no-repeat 10px 12px,-webkit-gradient(linear,50% 0%,50% 100%,from(#000),to(#1A1B1E));
                      }
                      &.selected {
                        background:url('../img/icons/color_circles.png') no-repeat 10px 12px,-webkit-gradient(linear,50% 0%,50% 100%,from(#000),to(#1A1B1E));
                      }
                    }

                    &#deg {
                      width:30px;
                      height:11px;
                      padding:9px 9px 9px 24px;
                      -webkit-border-top-right-radius: 3px;
                      -webkit-border-bottom-right-radius: 3px;
                      background:url('../img/icons/color_circles.png') no-repeat 10px -9px,-webkit-gradient(linear,50% 0%,50% 100%,from(#36383C),to(#232427));

                      &:hover {
                        background:url('../img/icons/color_circles.png') no-repeat 10px -9px,-webkit-gradient(linear,50% 0%,50% 100%,from(#000),to(#1A1B1E));
                      }
                      &.selected {
                        background:url('../img/icons/color_circles.png') no-repeat 10px -9px,-webkit-gradient(linear,50% 0%,50% 100%,from(#000),to(#1A1B1E));
                      }
                    }
                  }
                }
            }
        }

        #maptools {
            float:right;
            margin:10px 280px 0 0;

            li {
              position:relative;
              width:116px;
              margin:0;
              padding:20px 24px;


              a {
                font:bold 13px $text_font;
                color:white;
                text-shadow:0 1px black;
                padding:0 25px 3px 0;
                text-decoration:none;

                &#compare {
                  background:url('../img/icons/compare.png') no-repeat right 0;
                }

                &#ndfirange {
                  background:url('../img/icons/range.png') no-repeat right 0;
                }
              }
            }

            $bkg_slider: #232427;

            #compare_li {
              position:relative;
            }
            div#compare_wrapper {
              display:none;
              position:absolute;
              top:40px;
              left:-2px;
              width:168px;
              height:61px;
              background:url('../img/bottom_compare_wrapper.png') no-repeat center bottom;

              ul {
                display:block;
                margin:8px 0 0 27px;

                li {
                  display:inline-block;
                  height:28px;
                  width:29px;
                  padding:0;
                  margin:0 13px 0 0;

                  a {
                    display:block;
                    width:27px;
                    height:27px;
                    padding:0;
                    margin:0;
                    border:1px solid rgba(0,0,0,0);
                    @include border-radius(3px);
                    text-indent:-9999px;

                    &:hover {
                      border-color:black;
                      box-shadow:0 1px #2A2C2E;
                      cursor:pointer;
                    }

                    &.selected {
                      border-color:black;
                      box-shadow:0 1px #2A2C2E;
                      cursor:default;
                    }

                    &.one {
                      background:url('../img/icons/compare_single.png') center center no-repeat;
                    }
                    &.two {
                      background:url('../img/icons/compare_two.png') center center no-repeat;
                    }
                    &.four {
                      background:url('../img/icons/compare_four.png') center center no-repeat;
                    }
                  }
                }
              }
            }
            #compare_li:hover {
              background:url('../img/over_header_settings.png') no-repeat 0 0;
              #compare {
                background-position:right -23px;
              }
              #compare_wrapper {
                display:block;
              }
            }


            #range:hover {
              background:url('../img/over_header_settings2.png') no-repeat 0 0;
              #ndfirange {
                background-position:right -30px;
              }
               #slider_wrapper {
                  display:block;
              }

            }
            #range {
                position: relative;
            }
            #slider_wrapper {
              position:absolute;
              display:none;
              top:40px;
              right:2px;
              width:273px;
              height:61px;
              background:url('../img/bottom_range_wrapper.png') no-repeat 0 0;
              z-index:2;

              div#ndfi_slider {
                position:absolute;
                bottom:31px;
                left:27px;
                border:none;
                width:218px;
                height:1px;
                background:none;

                span.hack_red {
                  position:absolute;
                  top:0;
                  right:0;
                  z-index:1;
                  height:1px;
                  background:red;
                }

                p.tooltip {
                  position:absolute;
                  top:-26px;
                  width:24px;
                  height:10px;
                  margin:0 0 0 -7px;
                  padding:4px 0 10px 1px;
                  background:url('../img/slider_tooltip_bkg.png') no-repeat 0 0;
                  font:normal 10px $text_font;
                  color:#CCCCCC;
                  text-align:center;
                }


                .ui-slider-handle {
                  top:-6px;
                  width:13px;
                  height:14px;
                  background:url('../img/icons/slider_handle.png') no-repeat 0 0;
                  padding:0;
                  outline:none;
                  border:none;

                  &:focus {
                    outline:none;
                  }
                }

                .ui-state-focus,.ui-state-hover {
                  background-position:0 -14px;
                  cursor:pointer;
                }

                .ui-slider-range {
                  background:#FDCC8A;
                }
              }
            }
        }
    }
    #overview {
        position: absolute;
        right: 30px;
        top: 0;
        $padding: 20px;
        width: 240px - 2*$padding;
        height: 153px - 2*$padding;
        padding: $padding;

        z-index: 10;
        background: -webkit-gradient(linear, left top, left bottom, from($overview_top), to($overview_bottom));

        h3 {
          display:block;
          padding:0 0 0 15px;
          background:url('../img/icons/padlock.png') no-repeat 0 2px;
          color: #F7C8C0;
          font:bold 13px $text_font;
          text-shadow: #A03420 0px 1px 0px;
        }

        p#cells {
          display:block;
          padding:2px 0 0 0;
          color:#AC3722;
          font:normal 13px $text_font;
          text-shadow:0 1px #FA8B73;
        }

        div.info {
          display:block;
          margin:15px 0 0 0;

          p {
            float:left;
            width:auto;
            padding:0 0 0 12px!important;
            font:normal 13px $text_font;
            color:#96301C;
            text-shadow:0 1px #E67F6A;
            background:url('../img/icons/marker_overview.png') no-repeat 0 2px;

            a {
              color:#96301C;
              text-decoration:none;
              &:hover {
                text-decoration:underline;
              }
            }
          }

          a.notes {
            float:right;
            padding:2px 5px 3px;
            @include border-radius(3px);
            background:#C74027;
            font:normal 10px $text_font;
            color:#FF8873;
            text-decoration:none;

            &:hover {
              color:white;
            }
          }
        }

        #analysed_global_progress {
          display:inline-block;
          padding:10px 0 0 0!important;
          #bar {
              position: relative;
              float:left;
              width:200px;
              height:35px;
              border:1px solid #333333;
              @include border-radius(5px);
              box-shadow:0 1px #F3775E;
              background: #8D2D19;
              #progress {
                position: absolute;
                background: -webkit-gradient(linear, left top, left bottom, from(#EBEBEB), to(#CCCCCC));
                width: 20%;
                height: 35px;
                border-bottom-left-radius: 5px;
                border-top-left-radius: 5px;
              }
              #progress_number {
                position: relative;
                padding: 10px 0 0 10px;
                font:bold 13px $text_font;
                color:#666666;
                text-shadow:0 1px white;
              }
          }
        }

        div.analysed {
          display:inline-block;
          padding:10px 0 0 0!important;

          &.hidden {
            display:none;
          }

          button.finish_button {
            float:left;
            width:200px;
            height:35px;
            padding:8px 5px 9px 10px;
            border:1px solid #333333;
            @include border-radius(5px);
            box-shadow:0 1px #F3775E;
            background:-webkit-gradient(linear,50% 0%,50% 100%,from(#EBEBEB),to(#CCCCCC));

            &:hover {
              background:-webkit-gradient(linear,50% 0%,50% 100%,from(#CCCCCC),to(#EBEBEB));
            }

            span.separator {
              float:left;
              height:18px;
              width:2px;
              background:url('../img/button_separator.png') no-repeat 0 0;
            }

            p.stats {
              float:left;
              width:120px;
              padding:1px 0 0 0;
              font:normal 13px $text_font;
              color:#666666;
              text-shadow:0 1px white;
              text-align:left;
            }
            p.stats_progress {
                width: 101px;
            }
            p.done {
              float:right;
              width:58px;
              padding:1px 0 0 0;
              font:bold 12px $text_font;
              color:#333333;
              text-transform:uppercase;
              text-align:center;
            }
            p.generate {
                width:70px;
                text-align: left;
            }
          }
        }
        
        #confirmation_dialog {
            $padding: 20px;
            width: 248px - 2*$padding;
            height: 164px - 2*$padding - 10px;
            padding:   $padding + 10px $padding $padding $padding;
            position: relative;
            top: 30px;
            left: -$padding - 3px;
            @include border-radius(5px);
            background: url('/static/img/confirmation_bkg.png');

            button {
                padding:10px 10px;
                border:1px solid #333333;
                @include border-radius(5px);
                background:-webkit-gradient(linear,50% 0%,50% 100%,from(#FFFFFF),to(#CCC));
                font:bold 12px $text_font;
                color:#333333;
                text-transform:uppercase;
                text-align:center;

                &:hover {
                  background:-webkit-gradient(linear,50% 0%,50% 100%,from(#CCCCCC),to(#EBEBEB));
                }
            }
            a {
                color: #EA462C;
                float: right;
                font:normal 13px $base;
                padding-top: 10px;
                display: inline-block;
            }
            h3 {
                width:100%;
                padding:0 0 10px;
                font:bold 13px $DroidSans;
                color:#333333;
                background: none;
                text-shadow: none;
            }
            p {
                font:normal 13px $text_font;
                color:#333333;
                padding:0 0 15px;
            }
        }
    }
}
